<template>
  <div>
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText"
      v-if="isShow"
    >
    </el-input>
    <el-tree
      :ref="treeRef"
      :data="treeData"
      :props="defaultProps"
      :lazy="lazy"
      :load="loadNode"
      :accordion="accordion"
      :draggable="draggable"
      :show-checkbox="showCheckbox"
      :highlight-current="highlightCurrent"
      :node-key="nodeKey"
      :default-expanded-keys="defaultExpandedKeys"
      :default-checked-keys="defaultcheckedKeys"
      :default-expand-all="defaultExpandedAll"
      :filter-node-method="filterNode"
      :current-node-key="currentNodeKey"
      :empty-text="emptyText"
      @node-click="handleNodeClick"
      @check="checkCallback"
      @check-change="handleCheckChange"
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
    ></el-tree>
  </div>
</template>

<script>
import { getComboTreeData } from "@/components/api/fromSource.js";
export default {
  name: "tree",
  props: {
    //自定义ref
    treeRef: {
      type: String,
      default() {
        return "vueTree";
      },
    },// 当前选项配置
    defaultProps: {
      type: Object,
      default() {
        return {
          code: "id",
          label: "label",
          children: "children",
          disabled: "disabled",
          isLeaf: "leaf",
        };
      },
    },
    emptyText: {
      //	内容为空的时候展示的文本
      type: [String],
      default() {
        return "";
      },
    },
    currentNodeKey: {
      //	当前选中的节点
      type: [String, Number],
      default() {
        return "";
      },
    },
    draggable: {
      //节点可拖拽
      type: Boolean,
      default() {
        return true;
      },
    },
    accordion: {
      //对于同一级的节点，每次只能展开一个
      type: Boolean,
      default() {
        return false;
      },
    },
    lazy: {
      //是否懒加载子节点，需与 load 方法结合使用
      type: Boolean,
      default() {
        return false;
      },
    },
    //节点是否可被选择
    showCheckbox: {
      type: Boolean,
      default() {
        return true;
      },
    },
    highlightCurrent: {
      //高亮节点
      type: Boolean,
      default() {
        return true;
      },
    },
    nodeKey: {
      //键值
      type: String,
      default() {
        return "id";
      },
    },
    defaultExpandedKeys: {
      //默认展开的节点
      type: Array,
      default() {
        return [];
      },
    },
    defaultcheckedKeys: {
      //默认选中的节点
      type: Array,
      default() {
        return [];
      },
    },
    defaultExpandedAll: {
      //默认是否展开全部
      type: Boolean,
      default() {
        return true;
      },
    },
    isShow: {
      //是否显示搜索框
      type: Boolean,
      default() {
        return false;
      },
    },
    // 是否自定义数据
    isCustomData: {
      type: Boolean,
      default() {
        return true;
      },
    },
    // 当前组件自定义数据
    customData: {
      type: Array,
      default() {
        return [];
      },
    },
    which: {
      type: [String, Number],
      default() {
        return 1;
      },
    },
  },
  data() {
    return {
      filterText: "",
      treeData: [],
    };
  },
  components: {},
  watch: {
    filterText(val) {
      this.$refs[this.treeRef].filter(val);
    },
  },
  created() {
    this.getData();
  },
  mounted() {},
  methods: {
    getData() {
      if (this.isCustomData) {
        this.initTreeData(this.customData);
      } else {
        let params = {};
        getComboTreeData(params).then((res) => {
          this.initTreeData(res.data);
        });
      }
    },
    initTreeData(data) {
      this.treeData = data && data.length > 0 ? data : [];
    },
    handleNodeClick(data, Node, tree) {
      //节点被点击时的回调 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 node、节点组件本身
      this.$emit("callbackNodeClick", data, node, tree);
    },
    checkCallback(data, checkedNodeObj) {
      //当复选框被点击的时候触发  传递给 data 属性的数组中该节点所对应的对象、checkedNodeObj是选中节点对应的对象，checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys
      this.$emit("callbackCheck", data, checkedNodeObj);
    },
    handleCheckChange(data, checked, indeterminate) {
      //节点选中状态发生变化时的回调  共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
      this.$emit("callbackCheckChange", { data, checked, indeterminate });
    },
    loadNode(node, resolve) {},
    getCheckedNodes() {
      // 通过 node 获取选中节点
      return this.$refs[this.treeRef].getCheckedNodes();
    },
    getCheckedKeys() {
      //通过 key 获取选中节点
      return this.$refs[this.treeRef].getCheckedKeys();
    },
    setCheckedNodes(nodeData) {
      // 通过 node 设置选中节点
      this.$refs[this.treeRef].setCheckedNodes(nodeData);
    },
    setCheckedKeys(nodeKey) {
      // 通过 key设置选中节点
      this.$refs[this.treeRef].setCheckedKeys(nodeKey);
    },

    getHalfCheckedNodes() {
      // 通过 node 获取选中节点
      return this.$refs[this.treeRef].getHalfCheckedNodes();
    },
    getHalfCheckedKeys() {
      //通过 key 获取选中节点
      return this.$refs[this.treeRef].getHalfCheckedKeys();
    },
    getCurrentNode() {
      // 通过 node 获取当前节点
      return this.$refs[this.treeRef].getCurrentNode();
    },
    getCurrentKey() {
      //通过 key 获取当前节点
      return this.$refs[this.treeRef].getCurrentKey();
    },
    setCurrentNode(nodeData) {
      // 通过 node 设置当前节点
      this.$refs[this.treeRef].setCurrentNode(nodeData);
    },
    setCurrentKey(nodeKey) {
      // 通过 key设置当前节点
      this.$refs[this.treeRef].setCurrentKey(nodeKey);
    },

    resetChecked() {
      //重置选中的节点
      this.$refs[this.treeRef].setCheckedKeys([]);
    },
    handleDragStart(node, ev) {
      //节点开始拖拽时触发的事件 共两个参数，依次为：被拖拽节点对应的 Node、event
      // console.log('drag start', node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      //拖拽进入其他节点时触发的事件 共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event
      // console.log('tree drag enter: ', dropNode.label);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      //拖拽离开某个节点时触发的事件 共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event
      // console.log('tree drag leave: ', dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      //在拖拽节点时触发的事件 共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event
      // console.log('tree drag over: ', dropNode.label);
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      // 拖拽结束时（可能未成功）触发的事件  共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event
      // console.log('tree drag end: ', dropNode && dropNode.label, dropType);
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      //拖拽成功完成时触发的事件 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event
      // console.log('tree drop: ', dropNode.label, dropType);
    },
    filterNode(value, data) {
      let showName = this.defaultProps["label"];
      if (!value) return true;
      return data[showName].indexOf(value) !== -1;
    },
  },
};
</script>